<template>
	<view class="details">
		<view class="con">
			<scroll-view scroll-y="true" class="left">
				<view :class="index==selIndex?'item check':'item'" v-for="(item,index) in columbList" :key="index" @click="selTypeFun(index)">
					<text>{{item.itemName}}</text>
					<image v-if="index==selIndex" class="sel" src="https://hdsq.aoorange.cn/attachment/xcx/index/icon_index_tabbar_check.png" mode="widthFix"></image>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right">
				<view class="topnav">
				    <view v-for="(item, index) in itemList" :key="index" class="list" v-if="item.type == type" @click="jump('product_list', nowSearch+item.id)">
				        <image :src="item.cover" mode="aspectFill" v-if="item.cover != ''"></image>
				        <text>{{item.title}}</text>
				    </view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				selIndex: 0,
                scene: '',
                nowSearch: '',
                title: '栏目页面',
                columbList: [],
                type: 0,
				itemList: [],
			}
		},
		methods: {
            selTypeFun(k) {
                let item = _self.columbList[k];
                _self.selIndex = k;
                _self.type = item.itemId;
                _self.$forceUpdate();
            },
			getColumbList() {
                serve.request({
                    url: '/store/index/columb-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        scene:  _self.scene
                    },
                    v: '/v2',
                }).then(res => {
                    if(res.code != 200) {
                        uni.showToast({
                            title: res.message,
                            icon: 'none',
                            success() {
                                setTimeout(function() {
                                    common.jump('return_one')
                                }, 2000)
                            }
                        });
                    }
                    _self.title = res.data.title;
                    _self.columbList = res.data.list;
                    _self.type = _self.columbList[0].itemId;
                    _self.getItemList();
                });
            },
            getItemList() {
                serve.request({
                    url: '/store/index/item-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        scene:  _self.scene,
                        type: _self.type
                    },
                    v: '/v2',
                }).then(res => {
                    if(res.code != 200) {
                        uni.showToast({
                            title: res.message,
                            icon: 'none',
                            success() {
                                setTimeout(function() {
                                    common.jump('return_one')
                                }, 2000)
                            }
                        });
                    }
                    _self.itemList = res.data;
                    _self.$forceUpdate();
                });
            },
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			console.info('columb');
			_self = this;
			_self.scene = options.scene || 'brand';
            _self.nowSearch = 'storeType='+(options.storeType || 2);
            if(_self.scene == 'brand') {
                _self.nowSearch += '&brandId=';
            } else if (_self.scene == 'cate') {
                _self.nowSearch += '&cateId=';
            }
            _self.getColumbList();
		},
		onPullDownRefresh() {
			_self.getColumbList();
		},
	}
</script>

<style scoped lang="scss">
	.details{
		min-height: 100vh;
        
	    .con{
			display: flex;
			.left{
				height: calc(100vh - 169rpx);
				width: 180rpx;
				border: 1rpx #EBEBEB solid;
				.item {
					width: 100%;
					color: #666666;
					font-size: 24rpx;
					display: inline-block;
					vertical-align: middle;
					line-height: 100rpx;
					height: 100rpx;
					text-align: center;
					border-bottom: 1rpx #EBEBEB solid;
					border-collapse:collapse;
					position: relative;
					z-index: 0;
					text{
						position: relative;
						z-index: 5;
					}
					.sel {
						width: 78rpx;
						position: absolute;
						left: 50rpx;
						bottom:20rpx ;
						z-index: 2;
					}
				}
				.check{
					font-weight:bold ;
					color: #3333FF;
					background: #F7F7F7;
				}
				
				
			}
		    .right{
				height: calc(100vh - 169rpx);
				width: 570rpx;
				background: rgba(204,204,204,0.15);
				
				
				.topnav {
				    display: flex;
				    box-sizing: border-box;
				    padding-bottom: 30upx;
				    border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;
				    flex-wrap: wrap;
				    width: 100%;
				
				    .list {
				        display: flex;
				        flex-direction: column;
				        justify-content: center;
				        align-items: center;
				        width: 33%;
				        padding-top: 64upx;
				        color: #23345B;
				        font-size: 24upx;
				
				        image {
				            width: 98upx;
				            height: 97upx;
				        }
				    }
				}
			}
		}
		.through {
			text-decoration:line-through;
			color: #999999 !important;
		}
	}
</style>